<script>
import { ref } from "vue";
import Count from "./components/Count.vue";
export default {
  setup() {
    const msg = ref("Count");
    return { msg };
  },
  components: {
    Count,
  },
};
</script>

<template>
  <div>
    {{msg}}
    <Count id='app' :msg="msg" />
    <button @click="msg = 'hello'">改变msg</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

<!-- /**
  生命周期
 */
<script>
import { onBeforeMount, onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });

    return {};
  },
};
</script>

<template>
  <div></div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style> -->

<!-- <script>
import { ref, reactive, watch, toRefs, watchEffect, computed, onBeforeMount, onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(()=>{
      console.log("onBeforeMount")
    })
    onMounted(()=>{
      console.log("onMounted")
    })
    const counter = ref(0);
    const changeCounter = () => {
      counter.value++;
    };
    watch(counter, (newVal, oldVal) => {
      console.log("newVal---" + newVal, "oldVal---" + oldVal);
    });

    const msg = ref("hello world");
    const reverseMsg = computed(() => msg.value.split("").reverse().join(""));

    const user = reactive({
      name: "zx",
      age: 18,
    });
    const changeName = () => {
      user.name = "ss";
    };
    watchEffect(() => {
      console.log(user.name);
    });

    return {
      counter,
      changeCounter,
      ...toRefs(user),
      changeName,
      msg,
      reverseMsg,
    };
  },
};
</script>

<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="changeCounter">改变counter</button>
    <h3>{{ name }}</h3>
    <button @click="changeName">改变name</button>
    <h3>{{ msg }}</h3>
    <h3>{{ reverseMsg }}</h3>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style> -->

<!-- <script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  setup() {
    let msg = ref("Hello World");
    let changeMsg = () => {
      msg.value = "你好";
    };

    const counter = ref(0);
    const changeCounter = () => {
      counter.value++;
    };

    const obj = reactive({
      name: "zs",
      age: 18,
      children: {
        name: "xz",
      },
    });
    const changeObj = () => {
      obj.name = "ls";
      obj.age = 20;
      obj.children.name = "xz222"
    };

    return { msg, changeMsg, counter, changeCounter, obj, changeObj, ...toRefs(obj) };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("creacted");
  },
};
</script>

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="changeMsg">改变msg</button>
    <h2>{{ counter }}</h2>
    <button @click="changeCounter">改变counter</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ children.name }}</p>
    <button @click="changeObj">改变name和age</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style> -->
